<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* 使用通配符清除所有外边内边距
                使用默认样式（一个别人写的css文件）margin padding
                ul list-style
             */
            margin: 0px;
            padding: 0px;
        }
        div{
            height: 100px;
            width: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            /* margin-top: -100px;
            margin-left: 100px; */
            /* 把红色的移动到绿色的旁边 */
            /* margin-left: 100px;
            margin-top: 100px; */
            /* 定位  position ： */

            /* position: static; 
            默认的 */

            /* position: relative; */
            /* 相对定位 
            相对于自己本身进行定位
            */

            /* position: absolute; */
            /* 绝对定位
                相对于页面的起点
                只要祖先元素不是static   那么就会根据祖先元素来定位
                如果祖先元素  都是static  就会根据页面定位
             */
            /* top: 100px;
            left: 100px; */
            /* position: fixed; */
            /* 固定定位   一直固定在某一处 */
            /* left: 500px;
            top: 500px; */
            position: sticky;
            /* 粘性 定位 
            一开始在初始位置
                移动到设置的位置就不会动了
            */
            雪碧图   精灵图
            top: 50px;
            background-color: red;
        }

        .div3{
            /* margin-top: -100px; */
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
    <div class="div3"></div>
</body>
</html>